<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" >
    <!-- 网站图标添加 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
<body>

    <!-- 页面顶端的进度条 -->
    <div class="ui pink tiny progress myprogress">
        <div class="bar mybar"></div>
    </div>

    <!-- 加载动画 -->
    <div id="myloader" class="loader">
        <div style="--x:0"></div>
        <div style="--x:1"></div>
        <div style="--x:2"></div>
        <div style="--x:3"></div>
        <div style="--x:4"></div>
        <div style="--x:5"></div>
    </div>

    <!-- 导航 -->
    <nav th:replace="_fragments::menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" style="opacity:100%;">
        <div class="ui container">
            <!-- stackable样式是为了兼容手机端 在grid旁边找 -->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">tuanzi</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 归档</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="search..." >
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" id="myhide" class="ui black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!-- 中间内容 -->
    <div class=" m-container m-padded-tb-big" >
      
      <div class="ui container">
        <div class="ui stackable grid">
          <div class="eleven wide column">
            <div class="ui segment">
              <img src="https://unsplash.it/800/600" alt="" class="ui rounded image">
            </div>
          </div>
          <div class="five wide column">
            <div class="ui top attached segment">
              <div class="ui header">关于我</div>
            </div>
            <!-- 个人介绍 -->
            <div class="ui attached segment">
              <p class="m-text">
                团子，一个独立开发者，在编程中学习的学习者，一个终身学习的人，暂将学习无限循环，希望结识更多一起努力的小伙伴.
              </p>
              <p class="m-text">
                热爱编程，喜欢探讨，在努力的学习和创造自己的东西...
              </p>
            </div>
            <!-- 个人标签 -->
            <div class="ui attached segment">
              <div class="ui orange left pointing basic label m-margin-tb-tiny">编程</div>
              <div class="ui orange left pointing basic label m-margin-tb-tiny">写作</div>
              <div class="ui orange left pointing basic label m-margin-tb-tiny">思考</div>
              <div class="ui orange left pointing basic label m-margin-tb-tiny">运动</div>
            </div>
            <!-- 技术标签 -->
            <div class="ui attached segment">
              <div class="ui teal left pointing basic label m-margin-tb-tiny">java</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">javaScript</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">Python</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">mysql</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">c</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">shell</div>
              <div class="ui teal left pointing basic label m-margin-tb-tiny">...</div>
            </div>
            <!-- 链接 -->
            <div class="ui bottom attached segment">
              <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
              <a href="#" class="ui wechat circular icon button"><i class="wechat icon"></i></a>
              <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=3401829509&site=qq&menu=yes" class="ui circular icon button"><i class="qq icon"></i></a>
              <a target="_blank" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=3401829509@qq.com" class="ui circular icon button"><i class="mail icon"></i></a>
            </div>

            <div class="ui wechat-qr flowing popup transition hidden">
              <img src="../static/images/wechat.jpg" th:src="@{images/wechat.jpg}" style="width: 100px;" alt="" class="ui rounded image">
            </div>

          </div>
        </div>
      </div>

    </div>

    <br />
    <br />

    <!-- 底部元素 -->
    <footer th:replace="_fragments::footer" class="ui inverted vertile segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid stackable">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/wechat.jpg" th:src="@{images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我们</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email : 3401829509@qq.com</a>
                        <a href="#" class="item">QQ : 3401829509</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程，写作，思考相关的内容，希望可以给来到这儿的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-2023 Blog by tuanzi </p>
        </div>
    </footer>
    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>

    // 这里先定义一个滚动条的滚动
    $(function(){
        $(window).scroll(function(){
            var scrollTo = $(window).scrollTop(),
            docHeight = $(document).height(),
            windowHeight = $(window).height();
            scrollPercent = (scrollTo / (docHeight-windowHeight)) * 100;
            scrollPercent = scrollPercent.toFixed(1);
            console.log(scrollPercent+"% !important")
            $(".mybar").css({width:scrollPercent+"%"});
        }).trigger('scroll');

        //css动画定时关闭
        $('#myloader').delay(800).hide(0);
    })
    

    // 这里定义的是缩小成手机端后的点击显示导航栏方法
    $('#myhide').click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    })

    // 微信弹出
    $(".wechat").popup({
        popup : $(".wechat-qr"),
        on : 'click',
        position : 'bottom center'
    })

</script>

    <!-- 在最后这里加个樱飘的效果 -->
    <!--  这里我们在页面中直接使用js引入图片不太好引入，我们可以把定义好的js引入到这个html页面中  -->
    <script src="../static/js/flower.js" th:src="@{/js/flower.js}"></script>

    <!-- 就可以实现博客里面的小人效果了 -->
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
    <!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
    <!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
    <!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
    <!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
    <!-- 其他可选的模型：
      小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
      萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
      白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
      黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
      小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
      小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
      初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
      圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
      茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
      绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
      金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
      https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
      https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
      小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
      https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
      https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
      女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json -->
    <!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->
  <script>
    L2Dwidget.init({ "model": { jsonPath:
          "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
        "scale": 1 }, "display": { "position": "right", "width": 110, "height": 150,
        "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
      "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
  </script>

</body>
</html>